<!-- 实名认证 -->
<style scoped>
/* 顶部 */
.box {
    background-color: #f4f4f4;
    width: 100%;
    height: 100vh;
}

.top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    /* position: fixed;
  top: 0;
  right: 0; */
    /* text-align: center; */
    background-color: white;
}

.button {
    width: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border: 1px solid;
    border-radius: 20px;
}

.backspacing {
    width: 20px;
    height: 20px;
}

.null {
    width: 70px;
}

.form {
    margin-top: 20px;
}
</style>

<template>
    <div class="box">
        <!-- 顶部导航栏 -->
        <div class="top">
            <button class="button">
                <img src="../assets/zuoz.png" alt="" class="backspacing" @click="BACK" />
                <span>|</span>
                <img src="../assets/home2.png" alt="" class="backspacing" @click="home" />
            </button>
            <div class="text">实名认证</div>
            <div class="null"></div>
        </div>

        <!-- 表单 -->
        <van-form @submit="onSubmit" class="form">
            <van-cell-group inset>
                <van-field v-model="username" name="昵称" label="昵称：" placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"></van-field>
                <van-field v-model="password" type="number" name="手机号" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />

                <van-field v-model='sex' type="text" name="性别" label="性别：" placeholder="性别"
                    :rules="[{ required: true, message: '请填写性别' }]" />

                <van-field v-model="compellation" type="text" name="姓名" label="姓名：" placeholder="姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]" />

                <van-field v-model="IDnumber" type="number" name="身份证号" label="身份证号：" placeholder="身份证号"
                    :rules="[{ required: true, message: '请填写身份证号' }]" />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="danger" native-type="submit" @click="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { NoticeBar } from "vant";
import { useRouter, useRoute } from "vue-router";
import { name } from "../api/realname";

let useinfo = JSON.parse(sessionStorage.getItem('useinfo'))
console.log(useinfo.id);
const router = useRouter();
const route = useRoute();

// 返回我的页面
function BACK() {
    router.push({
        name: "me",
    });
}
// 返回首页
function home() {
    router.push({
        name: "home",
    });
}
const username = ref("");
const password = ref("");
const sex = ref("");
const compellation = ref("");
const IDnumber = ref("");

const onSubmit = (values) => {
    console.log("submit", values);
};

// 计算属性来根据 sex.value 显示不同的 placeholder
username.value = useinfo.nickname;
password.value = useinfo.tel;
sex.value = useinfo.sex;
console.log(useinfo.sex);
if (useinfo.sex == 1) {
    sex.value = '男'
} if (useinfo.sex == 2) {
    sex.value = '女'
}
compellation.value = useinfo.name;
IDnumber.value = useinfo.code;

function submit() {
    // console.log();
    // 实名认证接口
    name({
        user_id: useinfo.id,
        name: username.value,
        code: IDnumber.value,
        tel: password.value,
    })
        .then((data) => {
            console.log(data);
            // list.value = data.data;
            // console.log(list.value);
        })
        .catch((err) => {
            console.log(err);
        });
}
</script>